<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-1.11.3.js"></script>

    <script>
        function checkChange(one){
            var checked = $(one).prop('checked');
            checkAll(checked);
        }

        function checkAll(all){
            $('[name=hobby]').prop('checked',all);
            $('#checkAll').prop('checked',all);
        }

        function checkUn(){
            $('[name=hobby]').each(function (i,domEle){
                var oldValue = $(domEle).prop('checked');
                var newValue = !oldValue;
                $(domEle).prop('checked',newValue);
            });
        }
    </script>
</head>
<body>
选择爱好：<br>
<input type="checkbox" id="checkAll" onchange="checkChange(this)">全选/全不选
<br>
<input type="checkbox" name="hobby">敲代码
<input type="checkbox" name="hobby">睡觉
<input type="checkbox" name="hobby">打游戏
<input type="checkbox" name="hobby">吃饭
<br>
<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选">
<input type="button" onclick="checkAll(false)" value="全不选">
<input type="button" onclick="checkUn()" value="反选">
</body>
</html>